<template>
  <view class="setting_info">
    <view class="con">
      <text class="title">个人资料</text>
      <view class="item">
        <text class="tip">姓名</text>
        <view class="res">
          <input type="text" v-model="dataForm.name" placeholder="请输入姓名" />
        </view>
      </view>
      <view class="item">



        <text class="tip">性别</text>
        <picker @change="bindSexPickerChange" :value="sexIndex" :range="sexActions" range-key="name">
          <text class="res">
            {{ (dataForm.sexFlag == "2" ? "女" : "") 
            + (dataForm.sexFlag == "1" ? "男" : "")
            + (
            dataForm.sexFlag != "1" && dataForm.sexFlag != "2" 
              ? "未设置"
              : ""
            )
          }}
          </text>
        </picker>
      </view>

      <view class="item">
        <text class="tip">生日</text>
        <picker  mode="date" :range="sexActions" range-key="name"
          @change="bindBirthdayChange"
        >
        <text class="res">
          {{!dataForm.birthday ? "未设置" : dataForm.birthday}}
        </text>
        </picker>
      </view>

      <view class="item">
        <text class="tip">手机号码</text>
        <view class="res">
          <input type="text" v-model="dataForm.mobilePhone" v-if="!!dataForm.mobilePhone" placeholder="请输入手机号码"
            disabled />
          <input type="text" v-model="dataForm.mobilePhone" v-else placeholder="支付后系统自动录入" disabled />
        </view>
      </view>

      <text class="title">爱车资料</text>
      <view class="item">
        <text class="tip">车辆品牌</text>
        <view class="res">
          <input type="text" v-model="dataForm.truckBrand" placeholder="请输入车辆品牌" />
        </view>
      </view>
      <view class="item">
        <text class="tip">车牌号</text>
        <view class="res">
          <input type="text" v-model="dataForm.truckNumber" placeholder="请输入车牌号" />
        </view>
      </view>
      <view class="item">
        <text class="tip">常加油品</text>
        <picker @change="bindOilPickerChange" :value="oilIndex" :range="oilList" range-key="name">
          <text class="res">
            {{translationOilIdToOilName(dataForm.oilId)}} 
          </text>
        </picker>
      </view>
    </view>

    <!--
      <van-cell-group>
        <van-field v-model="value" label="文本" placeholder="请输入用户名" />
      </van-cell-group>
      <van-password-input
        :value="value"
        info="密码为 6 位数字"
        :error-info="errorInfo"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = false"
      />
    -->
    <view class="btn" @click="upInfo">
      保存资料
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        dataForm: {
          name: "",
          sexFlag: "",
          birthday: "", //生日
          mobilePhone: "",
          truckBrand: "", // 车辆品牌
          truckNumber: "", //车牌号
          oilId: "1",
        },
        oilList: [],
        oilIndex:"",
        sexActions: [{
            name: "男",
            value: "1"
          },
          {
            name: "女",
            value: "2"
          },
        ],
        sexIndex: ''
      };
    },
    created() {
      this.getInfo();
      this.getOilList();
    },
    methods: {
      async getInfo() {
        try {
          const infoData = await this.$Request({
            url: "/selectMemberInfo",
            method: "GET",
            data: {
              enterpriseId: this.enterpriseId,
              mobilePhone: this.phoneNumber,
            }
          })

          if (infoData.retCode !== 0) {
            throw new Error(infoData.message);
          }
          this.dataForm = infoData.data
        } catch (error) {
          console.log(error)
        }
      },
      async upInfo() {
        try {
          const infoData = await this.$Request({
            url:"/updateMemberInfo",
            method: "POST",
            data:this.dataForm
          });
          if (infoData.retCode !== 0) {
            throw new Error(infoData.message);
          }
          console.log("更新成功~")
          uni.showToast({
            title: '更新成功',
          })
        } catch (error) {
          console.log(error);
        }
      },
      async getOilList() {
        try {
          console.log(222)
          const oilListData = await this.$Request({
            url: "/selectOilInfoList",
            method: "GET",
            data: {}
          });
          if (oilListData.retCode !== 0) {
            throw new Error(oilListData.message);
          }
          this.oilList = oilListData.data.map(res => {
            return {
              ...res,
              name: res.oilName + "-" + res.oilClass + "-" + res.oilType
            }
          })
        } catch (error) {
          console.log(1, error);
        }
      },
      bindSexPickerChange(e) {
        this.sexIndex = e.detail.value
        this.dataForm.sexFlag = this.sexActions[e.detail.value].value
      },
      bindOilPickerChange(e){
        this.oilIndex = e.detail.value
        this.dataForm.oilId = this.oilList[e.detail.value].oilId
      },
      // onBirthdayConfirm(value) {
      //   let year = value.getFullYear();
      //   let month = +value.getMonth() + 1;
      //   let date = value.getDate();
      //   this.dataForm.birthday = year + '-' + month + '-' + date;
      //   this.birthdayShow = false;
      // },
      bindBirthdayChange(e){
        this.dataForm.birthday = e.detail.value
        this.dataForm = {...this.dataForm}
      },
      // onBirthdayCancel() {
      //   this.birthdayShow = false;
      // },
      // oilIdConfirm(val) {
      //   this.dataForm.oilId = val.oilId;
      //   this.dataForm = {
      //     ...this.dataForm
      //   }
      //   this.oilIdShow = false;
      // },
      translationOilIdToOilName(id) {
        const oil = this.oilList.find(ele => {
          return ele.oilId == id
        })

        if (!oil) {
          return "未设置"
        }
        console.log('oil', oil)

        return oil.oilName + "-" + oil.oilClass + "-" + oil.oilType
      }
    }
  }
</script>

<style lang="scss">
  .setting_info {
    width: 750rpx;
    min-height: 100vh;
    background-color: #f5f6f7;
    padding: 0 29rpx;
    box-sizing: border-box;
    overflow: hidden;

    >.con {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 1000rpx;
      box-sizing: border-box;
      margin-top: 30rpx;

      .title {
        font-size: 30rpx;
        font-weight: bold;
        line-height: 50rpx;
        height: 50rpx;
      }

      .item {
        display: flex;
        justify-content: space-between;
        width: 687rpx;
        height: 87rpx;
        background: #ffffff;
        border-radius: 15rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        align-items: center;
        font-size: 28rpx;
        color: #000000;


        .res {
          input {
            display: inline-block;
            background: none;
            outline: none;
            border: none;
            text-align: right;
          }
        }
      }

    }

    .btn {
      width: 524rpx;
      height: 75rpx;
      background: linear-gradient(-67deg, #FDB816, #FB8B0A);
      border-radius: 50rpx;
      margin: 0 auto;
      margin-top: 30rpx;
      line-height: 75rpx;
      text-align: center;

      font-size: 28rpx;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #FFFFFF;
    }
  }
</style>
